<template>
  <div class="home">
    <!-- <div class="banner">
      <el-carousel height="300px" motion-blur :autoplay="false">
        <el-carousel-item v-for="item in imgs" :key="item" style="height: 300px">
          <img :src="item" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div> -->
    <el-row :gutter="20">
      <el-col v-for="item in modulesList" :span="item.MS_Number" :key="item.MS_ID">
        <component :is="AsyncComponents[item.MS_ViewModel]" :itemConfig="item" />
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts" name="home">
import { ref, reactive, onMounted, defineAsyncComponent } from "vue";
import useCurrentInstance from "@/utils/useCurrentInstance";

const AsyncComponents: any = {
  statisticalAnalysis: defineAsyncComponent(() => import("./module/statisticalAnalysis.vue")),
  AccessTrends: defineAsyncComponent(() => import("./module/AccessTrends.vue")),
  NewManage: defineAsyncComponent(() => import("./module/NewManage.vue")),
  ShortCut: defineAsyncComponent(() => import("./module/ShortCut.vue")),
  newManage: defineAsyncComponent(() => import("./module/NewManage.vue")),
  swiper: defineAsyncComponent(() => import("./module/Swiper.vue"))
};
const { proxy } = useCurrentInstance();
// banner列表
// const imgs = ref([
//   new URL("./images/1.jpg", import.meta.url).href,
//   new URL("./images/2.jpg", import.meta.url).href,
//   new URL("./images/3.jpg", import.meta.url).href,
//   new URL("./images/4.jpg", import.meta.url).href
// ]);
// 模块列表
const modulesList = ref<any[]>([]);
// 获取模块列表
const getModules = () => {
  proxy.$vueAxios.get("MasterBaseModuleSet/GetModule").then((res: any) => {
    modulesList.value = res.List.sort((a: any, b: any) => a.MS_Site - b.MS_Site).filter((v: any) => v.MS_IsShow === true);
    console.log(modulesList.value);
  });
};
onMounted(() => {
  getModules();
});
// // 销毁时触发
// onBeforeUnmount(() => {
//   Object.values(dataScreen).forEach(val => val?.dispose());
// });
</script>

<style scoped lang="scss">
@import "./index.scss";
.banner {
  margin-bottom: 10px;
  img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
